<template>
    <Modal v-on:hidden="$emit('hidden')">
        <div class="polygon flexC">
            <!-- 点击关闭弹窗事件 -->
            <p class="polygonBtnClose" @click.self="$emit('hidden')">X</p>
            <!-- 从父组件传递 title 到此组件并设定为列表标题 -->
            <p class="polygon_title font_s36 textC colorF">
                <img src="../assets/img/components/03.png" class="verticM" style="opacity:0.5;height:19%">
                &nbsp;&nbsp;{{title}}&nbsp;&nbsp;
                <img src="../assets/img/components/04.png" class="verticM" style="opacity:0.5;height:19%">
            </p>
            <div class="modal_content flex4 flex">
                <div class="flexC JustifyContentSB flex1">
                    <slot></slot>
                </div>
            </div>
        </div>
    </Modal>
</template>
<script>
import Modal from './Modal'
export default {
  name: 'ModalPolygon01',
  components: {
    Modal
  },
  props: {
    title: {
      type: String,
      default: ''
    }
  }
}
</script>
<style lang="scss" scoped>
.polygon {
    width: 90%;
    height: 90%;
    position: absolute;
    top: 4%;
    left: 5%;
    .polygonBtnClose {
        position:absolute;
        top:3.2%;
        right:2%;
        border:1px solid #ccc;
        padding:0.25rem 1rem;
        border-radius:5px;
        color:#fff;
        cursor:pointer;
    }
    .polygon_title {
        line-height: 8.1825rem;
        margin-bottom: -4.2825rem;
        background: url(../assets/img/components/06.png) no-repeat;
        background-size: 100% 100%;
    }
    .modal_content {
        padding: 5rem 3rem 3rem 3rem;
        background: url(../assets/img/components/07.png) no-repeat;
        background-size: 100% 100%;
        // width:100%;
        // height: 100%;
    }
}
</style>
